<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Upload</title>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
                            <li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
                        @else
                            <li><a class="nav-link" href="{{ route('video.upload') }}">上传</a></li>
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>
    <div class="container mt-2">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Upload</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif
                   <input id="video" type="file" class="form-control" name="video_obj"> 
                   <div id="form1" class="mt-4" style="display: none;">
                        <div class="progress">
                           <div class="progress-bar"></div>
                       </div>
                       <div class="from-group mt-2">
                            <label>标题</label>
                           <input type="text" id="title" class="form-control" value="Default">
                       </div>
                       <div class="from-group mt-2"> 
                             <label>简介</label>
                           <textarea id="description" class="form-control"></textarea>
                       </div>
                       <div class="from-group mt-2">
                           <select id="visibility" class="form-control">
                               <option value="public">公开</option>
                               <option value="private">私有</option>
                           </select>
                       </div>
                       <div class="from-group">
                           <button class="btn btn-primary" id="store">保存</button>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="{{ asset('js/app.js') }}"></script>
    <script>

      var video_id = '';
      var startLoad = false;
        $("#video").change(function(){   
            let file =  $("#video").get(0).files[0];
               if(file){  
                $("#title").val(file.name.split(".")[0]);
                  axios.post("{{ route('video.store') }}", {
                    'title' : $("#title").val(),
                    'description' : $("#description").text(), 
                    'visibility' : $("#visibility").val(),
                    'extension' : file.name,
                    '_token' : "{{ csrf_token() }}" 
                }).then(function(result){
                   video_id = result.data.vid; 
                   startLoad = true;
                    //请求队列保存视频到七牛 
                     $("#form1").show();  
                      if(startLoad === true){
                          var form1 = new FormData();
                          form1.append('video', file);
                          form1.append('id', video_id);
                           axios.post("{{ route('video.upload.store') }}",  form1 , {
                              onUploadProgress: progressEvent => {
                                  let percentCompleted = (progressEvent.loaded / progressEvent.total) * 100; 
                                  $(".progress-bar").css({
                                      width : percentCompleted + '%'
                                  })
                                }
                           }).then(function (r) {
                                if(r.data.status == 'success'){
                                    $("#video").remove();
                                    $(".progress").remove();
                                    alert(r.data.msg);
                                    startLoad = false;
                                } 
                           })
                      }
                });  
               $("#store").click(function(){
                    $.post("{{ route('video.update') }}",{
                        '_token' : "{{ csrf_token() }}",
                         '_method' : "PUT",
                          'vid' : video_id,
                           'title' : $("#title").val(),
                            'description' : $("#description").text(), 
                            'visibility' : $("#visibility").val(),
                    }, function(response){
                           if(response.status == 'success'){
                                alert('保存成功');
                           }
                    })
               });  
           }
        })
        if(startLoad == true){
          $(window).bind('beforeunload',function(){   
             return '您的内容尚未保存，确定离开此页面吗？';   
          });  
        }
    </script>
</body>
</html>